<script>
import classNames from 'classnames'

import { on, off } from '@/utils/dom'
import { renderThumbStyle, BAR_MAP } from './helper'
import { ConfigConsumerProps } from '@/components/config-provider'

export default {
  name: 'Bar',

  props: {
    vertical: Boolean,
    size: String,
    move: Number
  },

  inject: {
    configProvider: { default: () => ConfigConsumerProps }
  },

  data () {
    return {
      hovering: false
    }
  },

  computed: {
    bar () {
      return BAR_MAP[this.vertical ? 'vertical' : 'horizontal']
    },

    wrap () {
      return this.$parent.wrap
    }
  },

  render (h) {
    const { size, move, bar } = this
    const getPrefixCls = this.configProvider.getPrefixCls
    const prefixCls = getPrefixCls('scroll-view')

    const barClass = classNames([`${prefixCls}__bar`, `is-${bar.key}`], {
      'is-hovering': this.hovering,
      'is-hidden': size <= 0
    })
    const thumbClass = classNames(`${prefixCls}__thumb`)
    return (
      <div class={barClass} onMousedown={this.clickTrackHandler}>
        <div
          ref="thumb"
          class={thumbClass}
          onMousedown={this.clickThumbHandler}
          style={renderThumbStyle({ size, move, bar })}
        ></div>
      </div>
    )
  },

  methods: {
    clickThumbHandler (e) {
      if (e.ctrlKey || e.button === 2) {
        return
      }
      this.hovering = true
      this.startDrag(e)
      this[this.bar.axis] =
        e.currentTarget[this.bar.offset] -
        (e[this.bar.client] -
          e.currentTarget.getBoundingClientRect()[this.bar.direction])
    },

    clickTrackHandler (e) {
      const offset = Math.abs(
        e.target.getBoundingClientRect()[this.bar.direction] -
          e[this.bar.client]
      )
      const thumbHalf = this.$refs.thumb[this.bar.offset] / 2
      const thumbPositionPercentage =
        ((offset - thumbHalf) * 100) / this.$el[this.bar.offset]
      this.wrap[this.bar.scroll] =
        (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) / 100
    },

    startDrag (e) {
      e.stopImmediatePropagation()
      this.cursorDown = true

      on(document, 'mousemove', this.mouseMoveDocumentHandler)
      on(document, 'mouseup', this.mouseUpDocumentHandler)
      document.onselectstart = () => false
    },

    mouseMoveDocumentHandler (e) {
      if (this.cursorDown === false) return
      const prevPage = this[this.bar.axis]

      if (!prevPage) return

      const offset =
        (this.$el.getBoundingClientRect()[this.bar.direction] -
          e[this.bar.client]) *
        -1
      const thumbClickPosition = this.$refs.thumb[this.bar.offset] - prevPage
      const thumbPositionPercentage =
        ((offset - thumbClickPosition) * 100) / this.$el[this.bar.offset]

      this.wrap[this.bar.scroll] =
        (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) / 100
    },

    mouseUpDocumentHandler (e) {
      this.hovering = false
      this.cursorDown = false
      this[this.bar.axis] = 0
      off(document, 'mousemove', this.mouseMoveDocumentHandler)
      document.onselectstart = null
    }
  },

  destroyed () {
    off(document, 'mouseup', this.mouseUpDocumentHandler)
  }
}
</script>
